<template>
  <div class="selectPar">
    <a-tree-select class="marginRight16"
                   v-model="value"
                   show-search
                   :style="style"
                   :dropdown-style="{ maxHeight: '3rem', overflow: 'auto', minWidth: '2rem' }"
                   tree-default-expand-all
                   :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                   @change="selectClick">
      <a-tree-select-node v-for="(item, index) in AreaListSD"
                          :key="index"
                          :value="item.code"
                          :title="item.name">
      </a-tree-select-node>
    </a-tree-select>
  </div>
</template>

<script>
export default {
  props: ['downType', 'width'],
  data () {
    return {
      value: ''
    }
  },
  watch: {
    AreaListSD: {
      handler: function (result) {
        this.value = result[0].name
        this.$emit('downClickPar', this.value, this.downType, result[0].code, result[0].gkz)
      },
      deep: true
    }
  },
  computed: {
    AreaListSD: function () {
      return this.$store.state.moduleSD.AreaListSD
    },
    style: function () {
      if (this.width) {
        return `width:${this.width};min-width:100px`
      } else {
        return 'width:auto;min-width:100px'
      }
    }
  },
  mounted () {
    if (this.$store.state.moduleSD.AreaListSD) {
      this.value = this.$store.state.moduleSD.AreaListSD[0].name
    }
  },
  methods: {
    selectClick: function (code, value, extra) {
      const gkz = '1'
      this.value = value[0]
      this.$emit('downClickPar', this.value, this.downType, code, gkz)
    }
  }
}
</script>

<style lang="less" scoped>
.selectPar {
  position: relative;
}
/deep/ .ant-select-tree li span.ant-select-tree-switcher {
  display: none;
}
</style>
